<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/fenye.css">
        <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    </head>
    <body>
        <div class="box1">
            <div class="header1">
                <ul>
                    <li>小米商城</li>
                    <span>|</span>
                    <li>MIUI</li>
                    <span>|</span>
                    <li>loT</li>
                    <span>|</span>
                    <li>云服务</li>
                    <span>|</span>
                    <li>金融</li>
                    <span>|</span>
                    <li>有品</li>
                    <span>|</span>
                    <li>小爱开放平台</li>
                    <span>|</span>
                    <li>企业团购</li>
                    <span>|</span>
                    <li>资质证照</li>
                    <span>|</span>
                    <li>协议规则</li>
                    <span>|</span>
                    <li>下载APP</li>
                    <span>|</span>
                    <li>Select Location</li>
                </ul>
                <ol>
                    <li><div class="shop">购物车(0)</div></li>
                    <li>消息通知</li>
                    <span>|</span>
                    <li>注册</li>
                    <span>|</span>
                    <li>登录</li>  
                </ol>   
            </div>
        </div>

        <div class="box2">
            <div class="header2">
                <div class="logo">
                    <img src="//s02.mifile.cn/assets/static/image/mi-logo.png" alt="">
                </div>
                <ul class="nav-top">
               
                </ul>
                <form class="select" action="">
                    <input type="text" name="" id="inp">
                    <span></span>
                </form>
            </div>
            
            <div class="nav-box">
               <ul>

               </ul>
            </div>
        </div>

        <div class="box3">
            <div class="a1">
                <a href="">首页</a><span>></span><a href="">全部结果</a><span>></span><a href="">蓝牙耳机</a>
            </div>
        </div>
        <div class="box4">
            <ul>
                <li>分类:</li>
                <li>全部</li>
                <li>耳机</li>
            </ul>
        </div>
        <div class="boxmax">
            <div class="list">
                <ul class="ul1">
            <!--         <li><a href="">综合</a></li>
                    <li><a href="">综合</a></li>
                    <li><a href="">综合/a></li>
                    <li><a href="">综合</a></li> -->
                </ul>
                <ol>
                    <li><span></span>仅看有货</li>
                    <li><span></span>分期</li>
                    <li><span></span>促销</li>
                    <li><span>收货地</span><span>湖南长沙市</span></li>
                </ol>
            </div>
            <div class="inv">
                <ul>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                        <p>小米圈铁四单元耳机 黑色</p>
                        <p>789元</p>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571384720.99968563.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="end-top">
            <ul>
                <li>预约维修服务</li>
                <li>7天无理由退货</li>
                <li>15天免费换货</li>
                <li>满99元包邮</li>
                <li>520余家售后网点</li>
            </ul>
        </div>
        <div class="end-center">
             <div class="end-left">
                 <dl>
                     <dt>帮助中心</dt>
                     <dd>账户管理</dd>
                     <dd>购物指南</dd>
                     <dd>订单操作</dd>
                 </dl>
                 <dl>
                     <dt>服务支持</dt>
                     <dd>售后政策</dd>
                     <dd>自主服务</dd>
                     <dd>相关下载</dd>
                 </dl>
                 <dl>
                     <dt>线下门店</dt>
                     <dd>小米之家</dd>
                     <dd>服务网点</dd>
                     <dd>授权体验店</dd>
                 </dl>
                 <dl>
                     <dt>关于小米</dt>
                     <dd>了解小米</dd>
                     <dd>加入小米</dd>
                     <dd>投资者关系</dd>
                 </dl>
                 <dl>
                     <dt>关于我们</dt>
                     <dd>新浪微博</dd>
                     <dd>官方微信</dd>
                     <dd>联系我们</dd>
                 </dl>
                 <dl>
                     <dt>特殊服务</dt>
                     <dd>F码通道</dd>
                     <dd>礼物码</dd>
                     <dd>防伪查询</dd>
                 </dl>
             </div>
             <div class="end-right">
                 <p class="phone">400-100-5678</p>
                 <p>
                     周一至周日 8:00-18:00
                     <br>
                     (仅收市话费)
                 </p>
                 <p>人工客服</p>
             </div>
        </div>













        <script src="../lib/swiper/js/swiper.min.js"></script>
        <script src="../js/fenye.js"></script>
        <script src="../lib/jquery/dist/jquery.min.js"></script>
        <script>
             getlist()
            function getlist(){
                $.ajax({
                    url:'../lib/nav_top.json',
                    dataType:'json',
                    success:function(res){
                        console.log(res)

                        var str=""
                        res.forEach(item => {
                            str += `<li>${item.name}</li>`
                        })
                        $('.nav-top')
                            .html(str)
                            .on({
                                mouseenter:()=>$('.nav-box').stop().slideDown(),
                                mouseleave:()=>$('.nav-box').stop().slideUp()
                            })
                            .children('li')
                            .on('mouseover',function(){
                                const index=$(this).index()
                                const list=res[index].list
                                var str=''
                                list.forEach(item=>{
                                    str +=`
                                    <li>
                                    <div class="imgs">
                                        <img src="${item.list_url}">
                                    </div>
                                    <div class="name">${item.list_name}</div>
                                    <div class="price">${item.list_price}</div>
                                    </li>
                                    `
                                })
                                $('.nav-box>ul').html(str)
                            })
                        $('.nav-box')
                             .on({
                                 mouseover:function(){$(this).finish().show()},
                                mouseout:function(){$(this).finish().slideUp()}
                            })
                    }

                })
            }
        
        
            setlist()
            function setlist(){
                $.ajax({
                    url:'../lib/list.json',
                    dataType:'json',
                    success:function(res){
                        var str=""
                        res.forEach(item =>{
                            str +=` <li><a href="">${item.name}</a></li>`
                        })
                        $('.ul1')
                            .html(str)
                            .children('li')
                            .on('mouseover',function(){
                                const index=$(this).index()
                                const list=res[index].list
                                var str=''
                                list.forEach(item=>{
                                    str +=`
                                    <li>
                                    <img src="${item.list_url}" alt="">
                                    <p>${item.list_name}</p>
                                    <p>${item.list_price}元</p>
                                    <img src="${item.list_url2}" alt="">
                                     </li>
                            
                                    `
                                })
                                $('.inv>ul').html(str)
                            })
                    }
                })
            }
        </script>
    </body>
</html>